<template>
  <div class="">
    <!-- 学习实验方法 -->
    <div class="wztipstc" v-if="eritems == 1">
      <div class="wzttile">
        <img src="@/images/tstipimg.png" alt="" class="tstipimg" />提醒
      </div>
      <div class="wzdesbox wzdesboxs">
        乙肝表面抗原(HBsAg)是乙肝病毒的外壳蛋白，本身不具有传染性，但它的出现常伴随乙肝病毒的存在，所以它是已感染乙肝病毒的标志。它可存在于患者的血液、唾液、乳汁、汗液、泪水、鼻咽分泌物、精液及阴道分泌物中。在感染乙肝病毒后2～6个月，当丙氨酸氨基转移酶升高前2～8周时，可在血清中测到阳性结果。急性乙型肝炎患者大部分可在病程早期转阴，慢性乙型肝炎患者该指标可持续阳性。本实验采用酶免仪自动完成步骤，其添加样品和试剂顺序和方法如下：样本稀释液(HBsAg稀释液25ml)+血清样本(25ml)》温育1h》HBsAg酶》温育0.5h》加入A、B液》终止液》比色
      </div>
      <img src="@/images/jxa.png" alt="" class="wzjx" @click="eritemfn(2)" />
    </div>
    <!-- 电脑登录工作站 -->
    <div class="dnbjbox" v-if="eritems == 4">
      <img src="@/images/dnbj.png" alt="" class="dnbjboximg" />
      <!-- 工作站图标 -->
      <div class="dniconbox" @click="dniconfn">
        <img src="@/images/dnicon.png" alt="" class="dnicon" ref="dnico" />
        <span>工作站</span>
      </div>
    </div>

    <!-- 工作站 -->
    <div
      class="gzdbox"
      v-if="
        eritems == 4.1 ||
        eritems == 4.2 ||
        eritems == 4.21 ||
        eritems == 4.22 ||
        eritems == 4.3 ||
        eritems == 4.31 ||
        eritems == 4.32 ||
        eritems == 6.1 ||
        eritems == 6.11 ||
        eritems == 6.2 ||
        eritems == 6.3 ||
        eritems == 6.31 ||
        eritems == 6.4 ||
        eritems == 7
      "
    >
      <div class="closegzd" v-if="eritems == 7" @click="sjstepfn(2)">
        关闭工作站
      </div>
      <div class="gzlbox">
        <div v-for="item in gztask" :key="item.id">
          <div
            class="gztaskitem"
            @click=";(ershow = !ershow), (gzstep = item.id)"
          >
            {{ item.name }}
            <img
              src="@/images/zk.png"
              alt=""
              class="gztaskitemzk"
              v-if="!ershow || gzstep != item.id"
            />
            <img
              src="@/images/zkac.png"
              alt=""
              class="gztaskitemzk"
              v-if="ershow && gzstep == item.id"
            />
          </div>
          <!-- 二级菜单 -->
          <div class="gztaskeritembox" v-if="ershow && gzstep == item.id">
            <div
              :class="
                items.id == erjstep
                  ? 'gztaskeritemhover gztaskeritem'
                  : ' gztaskeritem'
              "
              v-for="items in item.erdata"
              :key="items.id"
              @click="erjstep = items.id"
            >
              {{ items.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="gzrbox">
        <div
          class="gzrtopbox"
          v-if="
            eritems == 4.1 ||
            eritems == 4.2 ||
            eritems == 4.21 ||
            eritems == 4.22
          "
        >
          workstation
        </div>
        <div
          class="gzrtopboxs"
          v-if="
            eritems == 4.3 ||
            eritems == 4.31 ||
            eritems == 4.32 ||
            eritems == 6.1
          "
        >
          workstation
          <div class="gzanbox">
            <div class="gzand1">
              <img src="@/images/zk.png" alt="" class="zkdd" />
            </div>
            <div class="gzand">
              <img src="@/images/ys1.png" alt="" class="ysd" />
            </div>
            <div class="gzandjy">修改批次</div>
            <div class="gzandjy">删除批次</div>
            <div class="gzand" ref="tjxpc" @click="tjxpcfn">添加新批次</div>
            <div class="gzand">调整微板位置</div>
            <div class="gzand" ref="ddyxt" @click="eritems = 6.11">
              度运行图
            </div>
            <div class="gzand">拼板设置</div>
          </div>
        </div>

        <div
          class="gzrtopboxs"
          v-if="
            eritems == 6.11 ||
            eritems == 6.2 ||
            eritems == 6.3 ||
            eritems == 6.31 ||
            eritems == 6.4
          "
        >
          workstation
          <div class="gzanbox">
            <div class="gzand" ref="kszx" @click="kszxfn">开始执行</div>
            <div class="gzandmn">
              <img src="@/images/fxgj.png" alt="" class="fxgj" />
              模拟运行
            </div>
            <div class="gzand1">
              系统升级
              <img src="@/images/zk.png" alt="" class="zkdd" />
            </div>
            <div class="gzandsj">00:09:30</div>
            <div class="gzand">插入新批次</div>
            <div class="gzand">暂停</div>
            <div class="gzand">洗板暂停</div>
          </div>
        </div>
        <div class="gzrmains" v-if="eritems == 6.11 || eritems == 6.2">
          <img src="@/images/ddyxt.png" alt="" />
        </div>
        <div class="gzrmains" v-if="eritems == 6.31 || eritems == 6.4">
          <img
            src="@/images/syjgt.png"
            alt=""
            class="syjgt"
            @click="jgtboxshow = true"
          />
        </div>
        <div
          class="gzrmain"
          v-if="
            eritems == 4.1 ||
            eritems == 4.2 ||
            eritems == 4.21 ||
            eritems == 4.22
          "
        >
          <div class="gzanboxd">
            <div class="gzan" ref="kgjwh" @click="kgstartfn">开关机维护</div>
            <div class="gzan">开灯</div>
            <div class="gzan">关灯</div>
            <div class="gzan">更换深孔版</div>
          </div>
          <div class="gzanboxd">
            <div class="gzan">用户自定义1</div>
            <div class="gzan">用户自定义2</div>
            <div class="gzan">用户自定义3</div>
          </div>
          <div class="gzanboxsd">
            <div class="hjwd">
              环境温度：
              <div class="gzan">25.5</div>
            </div>
            <div class="hjwd">
              环境湿度：
              <div class="gzan">65.4%</div>
            </div>
          </div>
          123456
        </div>

        <div class="gzbotbox">
          <div class="gzbtas">首页</div>
          <div class="gzbtas">工作台</div>
          <div class="gzbtas">运行时序图</div>
        </div>
      </div>
    </div>
    <!-- 开关机维护弹窗 -->
    <div class="whbox" v-if="whboxshow">
      <div class="whtop">
        开关机维护 <i class="el-icon-close gbwh" @click="whboxshow = false"></i>
      </div>
      <div class="whmain">
        <div class="whitem">
          <span class="whitemspan"> 洗液桶号</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="whitem">
          <span class="whitemspan">载板位置</span>
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="whitems">
          <span class="whitemspan">洗板次数</span>
          <el-input v-model="input1" placeholder="请输入内容"></el-input>
          <span class="whitemspan whitemspans">静置稳压时间(S)</span>
          <el-input v-model="input2" placeholder="请输入内容"></el-input>
        </div>
        <div class="whitems">
          <span class="whitemspan">洗板次数</span>
          <el-input v-model="input1" placeholder="请输入内容"></el-input>
          <span class="whitemspan whitemspans">静置稳压时间(S)</span>
          <el-input v-model="input2" placeholder="请输入内容"></el-input>
        </div>
        <div class="whitems">
          <span class="whitemspan">吸液高度</span>
          <el-input v-model="input3" placeholder="请输入内容"></el-input>
          <span class="whitemspan whitemspans">mm(距顶部)</span>
        </div>
        <div class="whitems">
          <span class="whitemspan">分液高度</span>
          <el-input v-model="input4" placeholder="请输入内容"></el-input>
          <span class="whitemspan whitemspans">mm(距顶部)</span>
        </div>
        <div class="whitems">
          <span class="whitemspan">吸液时间</span>
          <el-input v-model="input5" placeholder="请输入内容"></el-input>
          <span class="whitemspan whitemspans">秒</span>
        </div>
        <div class="whitems">
          <span class="whitemspan">分液时间</span>
          <el-input v-model="input6" placeholder="请输入内容"></el-input>
          <span class="whitemspan whitemspans">秒</span>
        </div>
        <div class="whitems">
          <span class="whitemspan">吸分液方式</span>
          <el-radio v-model="radio" label="1">常规吸分液</el-radio>
          <el-radio v-model="radio" label="2">洗板头顺序注液</el-radio>
        </div>
        <div class="whitems">
          <span class="whitemspan">浸泡时间</span>
          <el-input v-model="input7" placeholder="请输入内容"></el-input>
          <span class="whitemspan whitemspans">秒</span>
        </div>
        <div class="whitems">
          <el-checkbox v-model="checked"
            >保持浸泡状态(浸泡时间>0时效)</el-checkbox
          >
          <!-- <span class="whitemspan"></span> -->
        </div>
      </div>
      <div class="whbobox">
        <div class="tool tcwh" ref="whks" @click="whksfn">
          <img src="@/images/tcwh.png" alt="" class="normal" />
          <img src="@/images/whksac.png" alt="" class="active" />
        </div>
        <div class="tool whks" ref="tcwb" @click="tcwbfn">
          <img src="@/images/whks.png" alt="" class="normal" />
          <img src="@/images/tcwhac.png" alt="" class="active" />
        </div>
        <div class="tool tcd">
          <img src="@/images/tcd.png" alt="" class="normal" />
          <img src="@/images/tcdac.png" alt="" class="active" />
        </div>
      </div>
    </div>
    <!-- 登录框 -->
    <div class="loginbox" v-if="loginshow">
      <div class="logintopbox">Login</div>
      <div class="loginmainbox">
        <div class="userbox">
          <img src="@/images/user.png" alt="" class="usera" />
          <el-input v-model="user" placeholder="请输入账号"></el-input>
        </div>
        <div class="pwdbox">
          <img src="@/images/pwd.png" alt="" class="pwda" />
          <el-input
            v-model="pwd"
            placeholder="请输密码"
            show-password
          ></el-input>
        </div>
        <div class="tool loginan" @click="login">
          <img src="@/images/login.png" alt="" class="normal" />
          <img src="@/images/loginac.png" alt="" class="active" />
        </div>
      </div>
    </div>
    <!-- 添加新批次 -->
    <div class="tjxpbox" v-if="tjxpboxshow">
      <div class="tjtbox">
        添加新批次
        <i class="el-icon-close gbwh" @click="tjxpboxshow = false"></i>
      </div>
      <div class="tjxmain">
        <img src="@/images/tjxptimg.png" alt="" />
      </div>
      <div class="tjbbox">
        <div
          class="tool tjqd"
          ref="qdxpc"
          @click=";(tjxpboxshow = false), (eritems = 4.32)"
        >
          <img src="@/images/qdxx.png" alt="" class="normal" />
          <img src="@/images/qdx.png" alt="" class="active" />
        </div>
        <div class="tool tjqd">
          <img src="@/images/qxa.png" alt="" class="normal" />
          <img src="@/images/qxac.png" alt="" class="active" />
        </div>
      </div>
    </div>
    <!-- 确定添加新批次 -->
    <div class="tjxpbox" v-if="eritems == 4.32">
      <div class="tjtbox">
        添加新批次
        <i class="el-icon-close gbwh"></i>
      </div>
      <div class="tjxmain">
        <img src="@/images/qdtjxpt.png" alt="" />
      </div>
      <div class="tjbbox">
        <div class="tool tjqd" ref="qdxpc" @click="eritemfn(5)">
          <img src="@/images/qdxx.png" alt="" class="normal" />
          <img src="@/images/qdx.png" alt="" class="active" />
        </div>
        <div class="tool tjqd">
          <img src="@/images/qxa.png" alt="" class="normal" />
          <img src="@/images/qxac.png" alt="" class="active" />
        </div>
      </div>
    </div>
    <!-- TIP 弹窗 -->
    <div class="whboxs" v-if="tipshows">
      <div class="whtop">
        选择TIP头起始装置位置
        <i class="el-icon-close gbwh" @click="tipshows = false"></i>
      </div>
      <div class="whmain">
        <div class="whitemd">
          <span class="whitemspan">Tip盒</span>
          <el-select v-model="value3" placeholder="请选择">
            <el-option
              v-for="item in option3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="value4" placeholder="请选择">
            <el-option
              v-for="item in option4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="whitem">
          <span class="whitemspan"> 逻辑编程1</span>
          <el-select v-model="value5" placeholder="请选择">
            <el-option
              v-for="item in option5"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="whitem">
          <span class="whitemspan">逻辑编程2</span>
          <el-select v-model="value6" placeholder="请选择">
            <el-option
              v-for="item in options6"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="whbobox">
        <div class="tool tcwhs" ref="whks" @click="tipshowsfn">
          <img src="@/images/qdxx.png" alt="" class="normal" />
          <img src="@/images/qdx.png" alt="" class="active" />
        </div>
      </div>
    </div>
    <!-- 
      结果弹窗
     -->
    <div class="jgtbox" v-if="jgtboxshow">
      <div class="whtop">
        选择TIP头起始装置位置
        <i class="el-icon-close gbwh" @click="jgtboxshow = false"></i>
      </div>
      <div>
        <img src="@/images/jgtc.png" alt="" class="jctgimg" />
        <div class="jgtcd">
          <div class="gzandjy">重新检查</div>
          <div class="gzandjy">锁定结果</div>
          <div class="gzand">打印图版结果</div>
          <div class="gzand">发送电子报告</div>
          <div class="gzand">导出数据...</div>
          <div class="gzand gzandt" @click="jgtboxshow = false">退 出</div>
        </div>
      </div>
    </div>
    <!-- 直接读书弹窗 -->
    <div class="zjdsbox" v-if="zjdsboxshow">
      <div class="whtop">
        直接读数
        <i class="el-icon-close gbwh" @click="zjdsboxshow = false"></i>
      </div>
      <div>
        <img src="@/images/zjdsimg.png" alt="" class="zjdsimg" />
        <div class="jgtcds">
          <div class="gzand" @click="zjdsboxshow = false">退 出</div>
        </div>
      </div>
    </div>
    <!-- 步骤提示 -->
    <bz-tip :bztext="bztext" v-if="bztext" />
    <!-- 完成提示 -->
    <right-tips :tipstext="tipstext" v-if="tipstext" />
  </div>
</template>

<script>
import BzTip from './bzTip.vue'
import RightTips from './rightTips.vue'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    eritem: {
      default: 1,
      String
    },
    sjstep: {
      default: 1, //三级菜单
      String
    },
    sjname: {
      default: '',
      String
    }
  },
  components: { BzTip, RightTips },
  data() {
    //这里存放数据
    return {
      tipstext: '',
      tipshows: false,
      whboxshow: false,
      zjdsboxshow: false,
      checked: true,
      radio: 1,
      input1: 10,
      input2: 5,
      input3: 13,
      input4: 5,
      input5: 1,
      input6: 1.1,
      input7: 0,
      jgtboxshow: false,
      options: [
        {
          value: '1号洗夜桶',
          label: '1号洗夜桶'
        },
        {
          value: '2号洗夜桶',
          label: '2号洗夜桶'
        }
      ],
      options2: [
        {
          value: '1',
          label: '1'
        },
        {
          value: '2',
          label: '2'
        }
      ],
      value: '1号洗夜桶',
      value2: 1,
      eritems: 1,
      erjstep: 0,
      gzstep: 1,
      user: '',
      ershow: false,
      pwd: '',
      loginshow: false,
      bztext: '',
      gztask: [
        {
          id: 1,
          name: '文件'
        },
        {
          id: 2,
          name: '系统管理',
          erdata: [
            {
              id: 1,
              name: '用户管理'
            },
            {
              id: 2,
              name: '系统设置'
            },
            {
              id: 3,
              name: '液体类别'
            },
            {
              id: 4,
              name: '管式稀释编辑'
            },
            {
              id: 5,
              name: '试剂厂商'
            },
            {
              id: 6,
              name: '洗板方法编辑'
            },
            {
              id: 7,
              name: '电子格式设置'
            },
            {
              id: 8,
              name: '方法编辑'
            },
            {
              id: 9,
              name: '方法组合管理'
            }
          ]
        },
        {
          id: 3,
          name: '仪器配置',
          erdata: [
            {
              id: 1,
              name: '部件控制台'
            },
            {
              id: 2,
              name: '部件参数'
            }
          ]
        },
        {
          id: 4,
          name: '日常工作',
          erdata: [
            {
              id: 1,
              name: '开始试验'
            },
            {
              id: 2,
              name: '试验结果'
            },
            {
              id: 3,
              name: '逻辑编程'
            },
            {
              id: 4,
              name: '直接读数'
            },
            {
              id: 5,
              name: '质控图管理'
            }
          ]
        },
        {
          id: 5,
          name: '报告管理',
          erdata: [
            {
              id: 1,
              name: '字典设置'
            },
            {
              id: 2,
              name: '报告单格式'
            },
            {
              id: 3,
              name: '样本信息'
            },
            {
              id: 4,
              name: '报告单打印'
            },
            {
              id: 5,
              name: '工作量统计'
            }
          ]
        },
        {
          id: 6,
          name: '帮助',
          erdata: [
            {
              id: 1,
              name: '关于'
            }
          ]
        }
      ],
      timer: null,
      tjxpboxshow: false,
      option3: [
        {
          value: '吸头盒1',
          label: '吸头盒1'
        },
        {
          value: '吸头盒2',
          label: '吸头盒2'
        }
      ],
      value3: '吸头盒1',
      option4: [
        {
          value: 'A1',
          label: 'A1'
        },
        {
          value: 'A2',
          label: 'A2'
        }
      ],
      value4: 'A1',
      option5: [
        {
          value: '无',
          label: '无'
        },
        {
          value: '有',
          label: '有'
        }
      ],
      value5: '无',
      option6: [
        {
          value: '无',
          label: '无'
        },
        {
          value: '有',
          label: '有'
        }
      ],
      value6: '无'
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    erjstep: {
      handler(i) {
        if (i == 1 && this.gzstep == 4) {
          if (this.eritems == 4.3) {
            this.bztext = '点击添加新批次，编辑新批次'
            this.$nextTick(() => {
              this.$refs.tjxpc.classList.add('tm')
            })
          }
        }
        if (i == 2 && this.gzstep == 4) {
          if (this.eritems == 6.3) {
            this.eritems = 6.31
          }
        }
        if (i == 4 && this.gzstep == 4) {
          if (this.eritems == 6.4) {
            // this.eritems = 6.31
            this.zjdsboxshow = true
          }
        }
      }
    },
    gzstep: {
      handler(i) {
        console.log('1', i)
        this.ershow = true
        this.erjstep = 0
      },
      immediate: true,
      deep: true
    },
    eritem: {
      handler(i) {
        this.eritems = i
        if (i == 6) {
          this.eritems = 6.1
        }
        // this.audioUrlfn('')
      },
      immediate: true,
      deep: true
    },
    eritems: {
      handler(i) {
        clearTimeout(this.timer)
        this.bztext = ''
        this.whboxshow = false
        this.tjxpboxshow = false
        this.tipshows = false
        this.jgtboxshow = false
        this.zjdsboxshow = false
        this.loginshow = false
        this.tipstext = ''
        this.erjstep = 0
        // 清空
        if (this.$refs.kgjwh) {
          this.$refs.kgjwh.classList.remove('tm')
        }
        if (this.$refs.whks) {
          this.$refs.whks.classList.remove('tm')
        }
        if (this.$refs.tcwb) {
          this.$refs.tcwb.classList.remove('tm')
        }
        if (this.$refs.tjxpc) {
          this.$refs.tjxpc.classList.remove('tm')
        }
        if (this.$refs.ddyxt) {
          this.$refs.ddyxt.classList.remove('tm')
        }
        if (this.$refs.kszx) {
          this.$refs.kszx.classList.remove('tm')
        }
        if (i == 4) {
          this.$nextTick(() => {
            this.$refs.dnico.classList.add('tm')
          })
          this.bztext = '点击工作站软件，启动工作站'
        }
        if (i == 4.1) {
          this.bztext = '点击登录按钮，使用默认账户登录工作站'
          this.loginshow = true
        }
        if (i == 4.2) {
          this.bztext = '点击开机维护按钮，进行开机维护'
          this.$nextTick(() => {
            this.$refs.kgjwh.classList.add('tm')
          })
        }
        if (i == 4.21) {
          this.bztext = '设置好相应参数后，点击维护开始'
          this.whboxshow = true

          this.$nextTick(() => {
            this.$refs.whks.classList.add('tm')
          })
        }
        if (i == 4.22) {
          this.bztext = '开机维护已完成，点击退出微板按钮，退出微板'
          this.whboxshow = true

          this.$nextTick(() => {
            this.$refs.tcwb.classList.add('tm')
          })
        }
        if (i == 4.3) {
          this.bztext = '点击主菜单列表中的“日常工作”，点击选择“开始试验'
        }
        if (i == 4.31) {
          this.bztext = '点击“确定”，添加新批次'
          this.tjxpboxshow = true
          this.$nextTick(() => {
            this.$refs.qdxpc.classList.add('tm')
          })
        }
        if (i == 4.32) {
          this.bztext = '点击“确定”，确定添加新批次'
          this.$nextTick(() => {
            this.$refs.qdxpc.classList.add('tm')
          })
        }
        if (i == 6.1) {
          this.bztext = '点击调度运行图，查看运行时序图'
          this.$nextTick(() => {
            this.$refs.ddyxt.classList.add('tm')
          })
        }
        if (i == 6.11) {
          this.timer = setTimeout(() => {
            this.eritems = 6.2
            clearTimeout(this.timer)
          })
        }
        if (i == 6.2) {
          this.bztext = '点击开始执行，并确定TIP头起始装置位置'
          this.$nextTick(() => {
            this.$refs.kszx.classList.add('tm')
          })
        }
        if (i == 6.3) {
          this.tipstext = '已分析完成'
          this.timer = setTimeout(() => {
            this.tipstext = ''
            this.bztext = '点击主菜单列表中的“日常工作”，点击选择“试验结果”'
            clearTimeout(this.timer)
          }, 2000)
        }
        if (i === 6.4) {
          this.bztext = '在主菜单列表“日常工作”中点击选择“直接读数”'
        }
      }
    },
    sjstep: {
      handler(i) {
        if (i == 1 && this.sjname == '设置工作站') {
          this.eritems = 4
        }
        if (i == 2 && this.sjname == '设置工作站') {
          //   this.$emit('eritemfns', 4.2)
          this.eritems = 4.2
        }
        if (i == 3 && this.sjname == '设置工作站') {
          //   this.$emit('eritemfns', 4.3)
          this.eritems = 4.3
          console.log(this.eritems)
        }
        if (i == 1 && this.sjname == '开始运行') {
          this.eritems = 6.1
        }
        if (i == 2 && this.sjname == '开始运行') {
          this.eritems = 6.2
        }
        if (i == 3 && this.sjname == '开始运行') {
          this.eritems = 6.3
        }
        if (i == 4 && this.sjname == '开始运行') {
          this.eritems = 6.4
        }
        if (i == 5 && this.sjname == '开始运行') {
          this.eritems = 100
        }
        if (i == 1 && this.sjname == '仪器关机') {
          this.eritems = 7
        }
        if (i == 2 && this.sjname == '仪器关机') {
          this.eritems = 700
        }
        if (i == 3 && this.sjname == '仪器关机') {
          this.eritems = 700
        }
      },
      immediate: true,
      deep: true
    }
  },
  //方法集合
  methods: {
    kszxfn() {
      if (this.eritems == 6.2) {
        this.tipshows = true
        this.$refs.kszx.classList.remove('tm')
      }
    },
    tipshowsfn() {
      this.tipshows = false
      this.tipstext = '正在进行分析，请稍等'
      this.timer = setTimeout(() => {
        this.tipstext = ''
        this.sjstepfn(3)
        clearTimeout(this.timer)
      }, 2000)
    },
    tjxpcfn() {
      if (this.eritems == 4.3) {
        this.$refs.tjxpc.classList.remove('tm')
        this.eritems = 4.31
      }
    },
    tcwbfn() {
      if (this.eritems == 4.22) {
        this.$refs.tcwb.classList.remove('tm')
        this.whboxshow = false
        this.sjstepfn(3)
      }
    },
    whksfn() {
      if (this.eritems == 4.21) {
        this.$refs.whks.classList.remove('tm')
        this.tipstext = '开始清洗疏通吸样头'
        this.timer = setTimeout(() => {
          this.tipstext = '吸样头已完成清洗疏通'
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            this.tipstext = ''
            this.eritems = 4.22
            clearTimeout(this.timer)
          }, 1000)
        }, 1000)
      }
    },
    kgstartfn() {
      if (this.eritems == 4.2) {
        this.$refs.kgjwh.classList.remove('tm')
        this.eritems = 4.21
      }
    },
    dniconfn() {
      this.$refs.dnico.classList.remove('tm')
      this.eritems = 4.1
    },
    login() {
      console.log('重生')
      this.loginshow = false
      this.sjstepfn(2)
    },
    eritemfn(i) {
      this.$emit('eritemfn', i)
    },
    taskfn(i) {
      this.$emit('taskfn', i)
    },
    sjstepfn(i) {
      this.$emit('sjstepfn', i)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
/* .wzdesboxs {
  font-size: 16.5px;
} */
.dnbjbox {
  position: absolute;
  top: 80px;
  left: 302px;
}
.dnbjboximg {
  width: 1259px;
  height: 765px;
}
.dniconbox {
  position: absolute;
  top: 70px;
  left: 70px;
  font-size: 22px;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.dnicon {
  width: 80px;
  height: 80px;
}
.dniconbox span {
  margin-top: 5px;
}
.loginbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.logintopbox {
  width: 381px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  text-indent: 20px;
  background: #168fff;
  color: #fff;
}
.loginmainbox {
  width: 381px;
  height: 240px;
  background: #000000;
}
.loginmainbox .el-input {
  width: 219px;
  height: 40px;
}
.loginmainbox .el-input__inner {
  -webkit-appearance: none;
  background-color: #1d2029;
  background-image: none;
  border-radius: 0px;
  border: 0px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  outline: 0;
}
.userbox {
  position: absolute;
  top: 80px;
  left: 90px;
}
.pwdbox {
  position: absolute;
  top: 130px;
  left: 90px;
}
.loginan {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 33px;
}
.loginan img {
  width: 94px;
  height: 38px;
}
.usera {
  width: 26px;
  height: 26px;
  position: relative;
  top: 8px;
  left: -10px;
}
.pwda {
  width: 26px;
  height: 26px;
  position: relative;
  top: 8px;
  left: -10px;
}
</style>
